//点击开始 有100个小格子
//left-Click 没有雷 

//     有雷  OVER
//rightClick 没有标记 进行标记  取消标记  标记正确  10个WIN

var startBtn = document.getElementById('btn');
var box = document.getElementById('box');
var lastboom = document.getElementById('lastboom');
var alertBox = document.getElementById('alertBox');
var alertImg = document.getElementById('alertImg');
var closeBtn = document.getElementById('close');
var shuzi=document.getElementById('shuzi')
var Num;//雷的数量
var over;//已经标记的雷的数量
var block;
var mineMap = [];
var startBool=true;

bindEvent();
function bindEvent() {
    startBtn.onclick = function () {
        if(startBool){
         box.style.display = 'block';
        lastboom.style.display = 'block';
        init();  
        startBool=false; 
        }
        

    }
    box.oncontextmenu = function () {//右键菜单取消
        return false;
    }
    box.onmousedown = function (e) {
        var event = e.target;
        if (e.which == 1) {   //判断左右键
            leftClick(event);
        } else if (e.which == 3) {   //右键
            rightClick(event);
        }
    }
    closeBtn.onclick = function () {//关掉失败界面
        alertBox.style.display = 'none';
        lastboom.style.display = 'none';
        box.style.display = 'none';
        box.innerHTML = '';
        startBool = true;
    }
}
function init() {
    Num = 10;
    over = 10;
    shuzi.innerHTML=over;
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            var con = document.createElement('div'); //每个小格子生成DIV
            con.classList.add('block');   //增加CLASS类名
            con.setAttribute('id', i + '-' + j);  //独自的ID
            box.appendChild(con);
            mineMap.push({ mine: 0 });//将所有格子成数组，每个格子MINE=0 说明没雷
        }
    }
    block = document.getElementsByClassName('block');
    while (Num) {
        var index = Math.floor(Math.random() * 100);//生成一个随机数
        if (mineMap[index].mine === 0) {// 每个格子没有雷的情况下
            mineMap[index].mine = 1;
            block[index].classList.add('islei');  //放雷
            Num--;
        }

    }

}
function leftClick(dom) {
    var islei = document.getElementsByClassName('islei');
    if(dom.classList.contains('flag')){
        return;
    }
    if (dom && dom.classList.contains('islei')) {//点到雷了
        console.log('gameOver');
        for (var i = 0; i < islei.length; i++) {//点到雷后把所有雷加上类名 显示出来
            islei[i].classList.add('show');
        }
        setTimeout(function () {
            alertBox.style.display = 'block';
            alertImg.style.backgroundImage = 'url("saoleiimg/over.jpg")';
        }, 800)
    } else {//没点到雷 
        var n = 0;
        var posArr = dom && dom.getAttribute('id').split('-');
        var posX = posArr && +posArr[0];
        var posY = posArr && +posArr[1];
        dom && dom.classList.add('num');
        for (var i = posX - 1; i <= posX + 1; i++) {//遍历 i,j 旁边8个位置
            for (var j = posY - 1; j <= posY + 1; j++) {
                var aroundBox = document.getElementById(i + '-' + j);
                if (aroundBox && aroundBox.classList.contains('islei')) {
                    n++;
                }
            }
        }
        dom && (dom.innerHTML = n);//将N传给DOM  显示出来
        if (n == 0) {
            for (var i = posX - 1; i <= posX + 1; i++) {//遍历 i,j 旁边8个位置
                for (var j = posY - 1; j <= posY + 1; j++) {
                    var nearBox = document.getElementById(i + '-' + j);
                    if (nearBox && nearBox.length != 0) {
                        if (!nearBox.classList.contains('check')) {//未标记中
                            nearBox.classList.add('check');//标记显示过了
                            leftClick(nearBox);//递归 n不等于0结束
                        }
                    }
                }
            }
        }
    }
}
function rightClick(dom){
    if(dom.classList.contains('num')){
        return;
    }
    dom.classList.toggle('flag');
    if(dom.classList.contains('islei')&&dom.classList.contains('flag')){
        over--;
    }
    if(dom.classList.contains('islei')&&!dom.classList.contains('flag')){
        over++;
    }
    shuzi.innerHTML=over;
    if(over==0){
        alertBox.style.display='block';
        alertImg.style.backgroundImage='url("saoleiimg/win.jpg")';
    }
}

